let _Vue = null;
export default class VueRouter {
    // 当使用 Vue.use 安装插件时，会自动调用 插件的 install 方法，并且会传入 Vue 构造函数
    static install(Vue) {
        // 判断插件是否已经安装
        if (VueRouter.install.installed) {
            return
        }
        VueRouter.install.installed = true;
        // 把 Vue 构造函数 记录到全局变量
        _Vue = Vue;

        // 使用混入的方式，在 beforeCreate 之前将 router 注入到 vue 的原型上。
        _Vue.mixin({
            beforeCreate() {
                // 我们只想在第一次创建vue实例的时候执行，将 router 选项挂载到原型上。
                if (this.$options.router) {
                    _Vue.prototype.$router = this.$options.router;
                }
            }
        })
    }
    constructor(options) {
        // 记录当前的 构造选项
        this.options = options;
        // 创建 存储路由组件的映射，key中存储的是 路由的 path ，也就是索引地址，value 中存储对应的组件。当加载到对应的地址后就会去 routerMap中找到相应的 组件加载出来。
        this.routerMap = {}
        // 这里是一个响应式的 属性。current 用于监听当前 路由的地址变化。
        console.log(_Vue.observable, typeof _Vue.observable)
        this.data = _Vue.observable({
            current: '/'
        })
        this.init();
    }
    createRouteMap() {
        // 遍历所有的路由规则，然后将解析后的路由规则以键值对的方式存储到 routerMap属性中
        this.options.routes.forEach(item => {
            this.routerMap[item.path] = item.component;
        })
    }
    init() {
        this.createRouteMap();
        this.initComponent(_Vue);
        this.initEvent();
    }
    // 初始化 vue-router 组件
    initComponent(Vue) {
        const self = this;
        //将 router-link组件注册到 Vue 中。
        Vue.component('router-link', {
            props: {
                to: String
            },
            methods: {
             // 修改锚点
              handleClick(e) {
                 if(self.options.mode === 'history'){
                     history.pushState({},'',this.to); 
                 }else{
                     window.location.hash = '#'+this.to;
                 }
                 this.$router.data.current = this.to;
                 e.preventDefault();
              }
            },     
            render (h) {
               return h('a', {
                   attrs: {
                       href: this.to,
                   },
                   on: {
                       click: this.handleClick
                   }
               },[this.$slots.default])
            }
        })
        // 将 router-view 组件 注册 到 Vue 中
        Vue.component('router-view', {
            render(h) {
               const component = self.routerMap[self.data.current];
               return h(component);
            }
        })
    }
    initEvent() {
        if(this.options.mode === 'history'){
            window.addEventListener('popstate',() => {
                this.data.current = window.location.pathname;
            })
        }else{
            // 监听 hashchange
            window.addEventListener('hashchange',() => {
                this.data.current = window.location.hash.replace('#','');
            })     
        }
       
    }
}
